<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="goods.css">

</head>

<body>
    <div class="goodsinfo">
        <form action="" class="choose">
            <ul>
                <li class="product">
                    <dl>
                        <dt>颜色：</dt>
                        <dd>
                            <a class="selected" href="javascript:;">黑色 <input type="radio" name="color" value="黑色"
                                    checked="checked"></a>
                            <a href="javascript:;">白色 <input type="radio" name="color" value="白色"></a>
                            <a href="javascript:;">蓝色 <input type="radio" name="color" value="蓝色"></a>
                            <input type="hidden" name="" value="">
                        </dd>
                    </dl>
                </li>

                <li class="product">
                    <dl>
                        <dt>版本：</dt>
                        <dd>
                            <a href="javascript:;" class="selected">i3 4G内存版 <input type="radio" name="ver" value=""
                                    checked="checked"></a>
                            <a href="javascript:;">i5 4G内存版 <input type="radio" name="ver" value=""></a>
                            <a href="javascript:;">i5 8G内存版<input type="radio" name="ver" value=""></a>
                            <a href="javascript:;">SSD超极本 <input type="radio" name="ver" value=""></a>
                            <input type="hidden" name="" value="">
                        </dd>
                    </dl>
                </li>
            </ul>
        </form>
    </div>
    <script>
        // data 变量表示的是服务端发给我们的商品的sku(货品)信息，根据数据 将可以选择的信息显示在ul标签中，最终显示结果  颜色：白色 黑色  内存：2G 4G 倒推
        var data = [{
            "id": 6,
            "goodsId": 38,
            "goodsSku": { "颜色": "白色", "内存": "2G" },
            "goodsCode": "x01",
            "goodsSpec": "",
            "saleNumber": 0,
            "total": 100,
            "shopPrice": "1.00",
            "marketPrice": "10.00",
            "status": 1
        },
        {
            "id": 7,
            "goodsId": 38,
            "goodsSku": { "颜色": "白色", "内存": "4G" },
            "goodsCode": "x02",
            "goodsSpec": "",
            "saleNumber": 0,
            "total": 100,
            "shopPrice": "2.00",
            "marketPrice": "9.00",
            "status": 1
        },
        {
            "id": 8,
            "goodsId": 38,
            "goodsSku": { "颜色": "黑色", "内存": "2G" },
            "goodsCode": "x03",
            "goodsSpec": "",
            "saleNumber": 0,
            "total": 100,
            "shopPrice": "3.00",
            "marketPrice": "8.00",
            "status": 1
        },
        {
            "id": 9,
            "goodsId": 38,
            "goodsSku": { "颜色": "黑色", "内存": "4G" },
            "goodsCode": "x04",
            "goodsSpec": "",
            "saleNumber": 0,
            "total": 100,
            "shopPrice": "4.00",
            "marketPrice": "7.00",
            "status": 1
        }
        ];
        //数据格式化
    </script>
</body>

</html>